The Web API URL is used to access and manipulate URLs. URL stands for Uniform Resource Locator. A URL is a unique address which is pointing to the resource. The URL is essential for making HTTP requests for making interactions with the API and for getting or sending data.
Table of Content
Concepts and UsageAccessing components of URL URL ModificationsImplementing the QueriesWe will explore the above topics with their description and understand them with suitable examples.
Concepts and UsageThe structuring and parsing of the URL follow the URL standard. A URL is composed of different parts. Some of the important parts are described below.
Syntaxhttps://www.index.html:443/file1/file2/resouce.html?id=val&password=val2#anchorComponentsComponents
Descriptions
SchemeThe HTTP part of the URL is the schema which indicates the protocol that the browser must follow to get the URL resource.Domain NameThe www.index.html part is the domain name. It indicates the server that is being requested in place of the domain name it can be an IP address.PortThe 443 part is the port number which is the internal gate to access resources.Path to resourceThe path /file1/file2/resouce.html is the path to the resource on the server.ParametersThe ?id=val&password=val2 is the parameter part that is provided to a web server.AnchorThe #anchor is the anchor part. It indicates the part of the resource we want to access.Accessing components of URLFor a given URL, the object can be created & parsing can be done for the URL, along with facilitating access to its constituent portions through its properties quickly.
Syntax// Creating the URL Objectlet address = new URL("https://geeksforgeeks.com/login/username=val1&password=val2");// Accessing the Host & Path Addresslet host = address.host;let path = address.pathname;
Here, we are trying to access the URL Object, Host, and Path Address for the given URL.
URL ModificationsTo modify the value of the URLs that are represented by the object, we can simply add new values for them. For instance, from the below URL, we will modify the username and password, which will update the overall URL. Thus, the properties of the URL can be settable.
Syntax// Changes the username and password attribute of the URL component.let name = "geeks1";let pswd = 'geek@123'; let url = new URL("https://geeksforgeeks.com/login");url.username = name;url.password = pswd; Implementing the QueriesThe search property of the URL component defines the portion of the query string. It allows one to look up the values of parameters. For instance, considering the below URL given, the search property of the URL component will be “username=val1&password=val2”. To search for the individual parameters, the URLSearchParams object’s get() method can be used.
Syntax// The parameter username and password// value which is pass with url.let url = new URL("https://geeksforgeeks.com/login?username=val1&password=val2");console.log( url.searchParams.get('username');console.lgo(url.serachParams.get('password');Static MethodURL.canParse(): It checks if a URL string is valid and can be parsed. It is used to quickly validate if the url is valid or not without creating URL object. It returns true if it is valid else false.URL.createObjectURL(): It is used to create a temporary URL for a File or Blob object. It returns a string representing the object URL.URL.parse(): It creates a URL object from a URL string and an optional base URL. It is useful for parsing and resolving relative URLs. It returns a URL object if valid else null.URL.revokeObjectURL(): It Releases an object URL previously created by URL.createObjectURL(). You can call this method to free up memory once the object URL is no longer needed.Example 1: In this example, we will parse the URL and see different parts of the URL. We will see the pathname, port number, and protocol.
HTMLWeb API URLWelcome To GFGURL detailsconst url = new URL(document.location.href);document.getElementById("ele").innerHTML ='Path Name: ' + url.pathname +'Port: ' + url.port +'' + ' Protocol ' +url.protocol + ''